import { mapGetters } from 'vuex';

export default {
  name: 'base-map',
  components: {},
  directives: {},
  data() {
    return {
      map: null,
      drawingLineTool: null,
      drawingAreaTool: null,
      showBarTools: true,
      markers: [],
      infoWindow: null
    }
  },
  computed: {
    ...mapGetters([
      'codesCheck'
    ])
  },
  created() {},
  beforeDestroy() {
    this.map.clearOverLays();
    this.map.clearLayers();
    this.markers = [];
  },
  mounted() {
    this.initTMap();
  },
  methods: {
    initTMap() {
      // eslint-disable-next-line no-undef
      const mapLay = new T.TileLayer("http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b46ebf7c5ab36f4089c8736ca303f14e", { minZoom: 1, maxZoom: 18 });
      // eslint-disable-next-line no-undef
      const mayLay2 = new T.TileLayer("http://t0.tianditu.gov.cn/cia_w/wmts?tk=b46ebf7c5ab36f4089c8736ca303f14e&service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", { minZoom: 1, maxZoom: 18 });
      const config = { layers: [mapLay, mayLay2] };
      // eslint-disable-next-line no-undef
      this.map = new T.Map('base-map', config, {
        attributionControl: false,
        inertia: false
      });
      // eslint-disable-next-line no-undef
      this.map.centerAndZoom(new T.LngLat(104.13743494999994, 37.87989704904882), 5);
      // 设置测量距离和面积工具
      // eslint-disable-next-line no-undef
      this.drawingLineTool = new T.PolylineTool(this.map, {
        showLabel: true,
        color: "#393", weight: 3, opacity: 1
      });

      // eslint-disable-next-line no-undef
      this.drawingAreaTool = new T.PolygonTool(this.map, {
        showLabel: true,
        color: "#393", weight: 3, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0.3
      });
    },

    toggleBarTools() {
      this.showBarTools = !this.showBarTools;
    },

    setMapZoom(flag) {
      // flag === true increase zoom or decrease zoom
      const currentZoom = this.map.getZoom();
      if (flag) {
        if (currentZoom < 19) {
          this.map.setZoom(currentZoom + 1);
        }
      } else {
        if (currentZoom > 1) {
          this.map.setZoom(currentZoom - 1);
        }
      }
    },

    deleteDrawingShapes() {
      this.drawingLineTool.clear();
      this.drawingAreaTool.clear();
    }
  }
}
